<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>积分系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/dist/css/skins/skin-blue.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="/static/plugins/datepicker/datepicker3.css">
    <![endif]-->

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">

        <!-- Logo -->
        <a href="/user/home" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg">积分系统</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- Messages: style can be found in dropdown.less-->
                    <li class="dropdown messages-menu">
                        <!-- Menu toggle button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="label label-success">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">您有4条信息待处理</li>
                            <li class="footer"><a href="#">查看所有信息</a></li>
                        </ul>
                    </li>
                    <!-- /.messages-menu -->
                    <!-- User Account Menu -->
                    <li class="dropdown user user-menu">
                        <!-- Menu Toggle Button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!-- The user image in the navbar-->
                            <img src="" class="user-image user_head_img" alt="User Image">
                            <!-- hidden-xs hides the username on small devices so only the image appears. -->
                            <span class="hidden-xs user_name"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-right">
                                    <a href="/user/logout" class="btn btn-default btn-flat">退出系统</a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">

            <!-- Sidebar user panel (optional) -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="" class="img-circle  user_head_img" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p class="user_name"></p>
                    <!-- Status -->
                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>


            <!-- Sidebar Menu -->
            <ul class="sidebar-menu">

                <!-- Optionally, you can add icons to the links -->
                <li class="treeview">
                    <a href="#"><i class="fa fa-link"></i> <span>积分管理</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/user/allUser">人员管理</a></li>
                        <li><a href="/mission">所有任务</a></li>
                        <li><a href="/Integral">积分模板</a></li>
                        </require><li><a href="">保留</a></li>
                        <li><a href="/integral">保留</a></li>
                        <li><a href="">保留</a></li>
                    </ul>
                </li>
            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                积分模板
                <small>创建您的积分模板</small>
            </h1>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="box">
                <div class="box-search">
                <div class="col-lg-6">
                    <div class="input-group">
                        <input type="text" class="form-control-sm" placeholder="输入所属分类" id="fenleiname">
                        <span class="input-group-btn-sm">
                      <button class="btn btn-default" style="background: #CD5555;color: white" type="button" onclick="fenlei()">创建分类</button>
                       </span>
                        <div class="btn-group">
                            <select  class="form-control" id="fenleilist" onchange="gaibian(this.options[this.options.selectedIndex].value)">
                                <option value="">选择部门</option>
                            </select>
                        </div>
                    </div>

                </div>

                    <button  style="float:right;background: #0d6aad;color: white"  class="btn btn-default" type="button" onclick="return insertTemplate()" >创建模板</button>
                    <button  style="float:right;background: #0d6aad;color: white"  class="btn btn-default" type="button" onclick="dakai()">删除分类</button>
                </div>
                <!-- /.box-header -->
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="attend_grid" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>模板id</th>
                            <th>模板名称</th>
                            <th>状态</th>
                            <th>奖励</th>
                            <th>扣除</th>
                            <th>是否停用</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>

                <!-- /.box-body -->
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


    <!--模态实例框-->
    <form method="post" action="/reAttend/start" class="form-horizontal" role="form" id="fota"  style="margin: 20px;">
        <div class="modal fade" id="reAttendModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            新建任务模板
                        </h4>
                    </div>
                    <div class="modal-body">

                        <div class="col-sm-9">
                            <%--<input type="hidden" class="form-control" name="id" value="" id="edit_id">--%>
                        </div>


                        <input type="hidden" name="car_type" value="" id="car_type_val" /><br/>
                        <div class="form-group has-feedback">
                            <input id="tMissionName" name="tMissionName"  type="email" class="form-control" placeholder="任务名">
                            <span class="fa fa-fw fa-user form-control-feedback"></span>
                            <span id="name" style="color: red;visibility: hidden">请输入任务名</span>

                            <select name="tMissionStatus" type="email" class="form-control">
                                <option value="1">周期性</option>
                                <option value="2">非周期性</option>
                            </select>
                            <span class="fa fa-fw fa-user form-control-feedback"></span>
                            <span id="status" style="color: red;visibility: hidden">请选择任务周期</span>


                            <input id="tMissionAward" name="tMissionAward"  type="email" class="form-control" placeholder="奖励" onkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="5" size="14" >
                            <span class="fa fa-fw fa-user form-control-feedback"></span>
                            <span id="award" style="color: red;visibility: hidden">请输入任务奖励</span>

                            <select name="tMissionStop" type="email" class="form-control">
                                <option value="1">启用</option>
                                <option value="2">停用</option>
                            </select>
                            <span class="fa fa-fw fa-user form-control-feedback"></span>
                            <span id="stop" style="color: red;visibility: hidden">请选择任务周期</span>
                        </div>
                        </div>


                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="return mu()" >
                        提交
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </form>
    <!--模态实例框-->

    <!-- Main Footer -->
    <footer class="main-footer">
        <strong>Copyright &copy; 2016 <a href="#">落叶</a>.</strong> All rights reserved.
    </footer>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.3 -->
<script src="/static/jquery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/app.min.js"></script>
<script src="/static/js/user.js"></script>
<script src="/static/js/mui.min.js"></script>
<script src="/static/js/ChinesePY.js"></script>
<!-- jQuery 2.2.3 -->
<script src="/static/jquery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/app.min.js"></script>
<script src="/static/js/mui.min.js"></script>
<script src="/static/js/user.js"></script>
<script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="/static/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/static/plugins/daterangepicker/moment.min.js"></script>
<script src="/static/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/static/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script>
    function insertTemplate() {
        $("#reAttendModal").modal('show');
    }

    function mu() {
        var form_data = $("#fota").serialize();
        alert(form_data)
        $.ajax({
            type:"post",
            url:"mission/wcategoryMission",
            data:form_data,
            success:function() {
                window.location.reload();
            }
        }) ;
    }
    mui.ajax({
        url:'mission/categoryAll',
        data: {},
        dataType: 'json',
        headers:{'Content-Type':'application/json'},
        type: 'post',
        success: function(data) {
            var table = document.getElementById("fenleilist");
                    for (var i =0;i<data.data.length;i++) {
                           var option = document.createElement('option');
                           option.setAttribute("value", data.data[i].categoryName);
                           option.innerHTML = data.data[i].categoryName;
                           table.appendChild(option);
                       }
        },
        error: function(xhr, type, errorThrown) {
            alert("网络错误！");
        }
    });


    $("#biaoqian").dblclick(function() {
        var id = $('#biaoqian option:selected').attr('id');
        mui.ajax({
            url:'deleteLabel',
            data: {"labelId":id},
            dataType: 'json',
            headers:{'Content-Type':'application/json'},
            type: 'post',
            success: function(data) {
                alert("删除成功！");
            },
            error: function(xhr, type, errorThrown) {
                alert("失败！");
            }
        });

    });

    $("#labelList").dblclick(function() {
        var id = $('#labelList option:selected').attr('id');
        alert(id);
    });



    function  dakai() {

        mui.ajax({
            url:'mission/categoryAll',
            data: {},
            dataType: 'json',
            headers:{'Content-Type':'application/json'},
            type: 'post',
            success: function(data) {
                var table = document.getElementById("labelList");
                for (var i =0;i<data.data.length;i++) {
                    var option = document.createElement('option');
                    option.setAttribute("value", data.data[i].categoryName);
                    option.setAttribute("id", data.data[i].categoryCid);
                    option.innerHTML = data.data[i].categoryName;
                    table.appendChild(option);
                }
            },
            error: function(xhr, type, errorThrown) {
                alert("网络错误！");
            }
        });

        mui.ajax({
            url:'user/allLabel',
            data: {},
            dataType: 'json',
            headers:{'Content-Type':'application/json'},
            type: 'post',
            success: function(data) {
                var table = document.getElementById("biaoqian");
                for (var i =0;i<data.data.length;i++) {
                    var option = document.createElement('option');
                    option.setAttribute("id", data.data[i].labelId);
                    option.setAttribute("value", data.data[i].labelName);
                    option.innerHTML = data.data[i].labelName;
                    table.appendChild(option);
                }
            },
            error: function(xhr, type, errorThrown) {
                alert("网络错误！");
            }
        });


        $("#reAttendModal").modal('show');
    }
    
    function fenlei() {
        var name = document.getElementById("fenleiname");
        if (name.value == "") {
            return;
        }
        var count = $("#fenleilist").find('option').length;
        for(var i=0;i<count;i++)
        {
            if($("#fenleilist").get(0).options[i].value == name.value)
            {
                alert("重复标签！");
                return;
            }
        }
        var table = document.getElementById("fenleilist");
        var option = document.createElement('option');
        mui.ajax({
            url:'mission/insertCategory',
            data: {"categoryName":name.value},
            dataType: 'json',
            headers:{'Content-Type':'application/json'},
            type: 'post',
            success: function(data) {
                option.setAttribute("value", name.value);
                option.innerHTML = name.value;
                table.appendChild(option);
                alert(data.message);
                name.value = "";
            },
            error: function(xhr, type, errorThrown) {
                alert("网络错误！");
            }
        });
    }
    function gaibian(data) {

    }
    function formToJson(form) {
        var result = {};
        var fieldArray = $('#' + form).serializeArray();
        for (var i = 0; i < fieldArray.length; i++) {
            var field = fieldArray[i];
            if (field.name in result) {
                result[field.name] += ',' + field.value;
            } else {
                result[field.name] = field.value;
            }
        }
        return result;
    }
    var table;

    function attendQuery() {
        table.ajax.reload();
    }
    $(function () {
        //提示信息
        $.fn.dataTable.ext.errMode = 'none';

        var lang = {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页 _MENU_ 项",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页",
                "sJump": "跳转"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };

        //初始化表格
        table = $("#attend_grid")
            .on('error.dt', function (e, settings, techNote, message) {
                console.warn(message)
            }).dataTable({
                language: lang, //提示信息
                autoWidth: false, //禁用自动调整列宽
                stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
                processing: true, //隐藏加载提示,自行处理
                serverSide: true, //启用服务器端分页
                searching: false, //禁用原生搜索
                orderMulti: false, //启用多列排序
                order: [], //取消默认排序查询,否则复选框一列会出现小箭头
                renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
                pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
                columnDefs: [{
                    "targets": 'nosort', //列的样式名
                    "orderable": false //包含上样式名‘nosort'的禁止排序
                }],
                ajax: function (data, callback, settings) {
                    //封装请求参数
                    var param = formToJson("attendQueryForm");
                    param.pageSize = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                    param.start = data.start;//开始的记录序号
                    param.currentPage = (data.start / data.length) + 1;//当前页码
                    param.categoryId = 1;
                    //console.log(param);
                    //ajax请求数据
                    $.ajax({
                        type: "GET",
                        url: "/mission/findTMission",
                        cache: false, //禁用缓存
                        data: param, //传入组装的参数
                        dataType: "json",
                        success: function (result) {
                            console.log(result);
//                            console.log(result);
                            //setTimeout仅为测试延迟效果
                            setTimeout(function () {
                                //封装返回数据
                                var returnData = {};
                                returnData.draw = data.startRow;//这里直接自行返回了draw计数器,应该由后台返回
                                returnData.recordsTotal = result.totalRows;//返回数据全部记录
                                returnData.recordsFiltered = result.totalRows;//后台不实现过滤功能，每次查询均视作全部结果
                                returnData.data = result.items;//返回的数据列表
                                //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                                callback(returnData);
                            }, 200);
                        }
                    });
                },
                //列表表头字段
                columns: [
                    {   "data": "seq",
                        render: function (data, type, full,row_col) {
                            return row_col.row;
                        }
                    },
                    {"data": "tMissionId" , "visible" : false },
                    {"data":"tMissionName",
                    }
                    ,
                    {"data":"tMissionStatus"}
                    ,
                    {"data":"tMissionAward"}
                    ,
                    {"data":"tMissionDeduct"}
                    ,
                    {"data":"tMissionSnumber"}
                    ,
                    {"data":"tMissionStop"}
                    ,
                    {
                        "data": "操作列",
                        render: function (data, type, full) {

                            return   '<button type="button" class="btn btn-info"  onclick="return labeluser('+JSON.stringify(full).replace(/\"/g,"'")+')" >编辑</button>'

                        }
                    }
                ]
            })
            .api();


        //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
    });
</script>
</body>
</html>
